<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> C4Penguin Map Editor </title>
	<style>
		body {
			/* IE10 Consumer Preview */
			background-image: -ms-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Mozilla Firefox */
			background-image: -moz-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Opera */
			background-image: -o-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Webkit (Safari/Chrome 10) */
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #012F50), color-stop(1, #0F75A5));
			/* Webkit (Chrome 11+) */
			background-image: -webkit-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* W3C Markup, IE10 Release Preview */
			background-image: linear-gradient(to bottom, #012F50 0%, #0F75A5 100%);
			/* IE7-8-9 */
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#012F50', endColorstr='#0F75A5');
			margin: 0;
		}

		canvas {
			padding-left: 0;
			padding-right: 0;
			margin: 8px auto;
			display: block;
		}
	</style>
</head>

<body>
	<script>
		// Setup canvas variable
		var SAVE_SPACE = 16;
		var CANVAS_W = 1280;
		var CANVAS_H = 720;
		
		var g_windowW = 0;
		var g_windowH = 0;
		
		var g_canvasW = CANVAS_W;
		var g_canvasH = CANVAS_H;
		var g_canvasScale = 1;
		var g_touchScale = 1;
		
		// Create the canvas
		var g_canvas = document.createElement("canvas");
		var g_context = g_canvas.getContext("2d");
		g_canvas.width  = CANVAS_W;
		g_canvas.height = CANVAS_H;
		document.body.appendChild (g_canvas);
		
		// Catch input event
		var g_originMouseX = 0;
		var g_originMouseY = 0;
		
		function ComputeMouseOrigin () {
			var temp = g_canvas;
			var windowOffsetX = 0;
			var windowOffsetY = 0;
			while (temp.tagName != 'BODY') {
				windowOffsetY += temp.offsetTop;
				windowOffsetX += temp.offsetLeft;
				temp = temp.offsetParent;
			}
			
			g_originMouseX = window.pageXOffset - windowOffsetX;
			g_originMouseY = window.pageYOffset - windowOffsetY;
		}
		
		// Resize the canvas depend on broswer size
		function ResizeCanvas () {
			// Detect screen width and height
			if (window.innerWidth) g_windowW = window.innerWidth;
			else if (document.documentElement && document.documentElement.clientWidth) g_windowW = document.documentElement.clientWidth;
			else if (document.body)	g_windowW = document.body.clientWidth;
			
			g_windowW -= SAVE_SPACE;
			
			if (window.innerHeight) g_windowH = window.innerHeight;
			else if (document.documentElement && document.documentElement.clientHeight) g_windowH = document.documentElement.clientHeight;
			else if (document.body) g_windowH = document.body.clientHeight;
			
			g_windowH -= SAVE_SPACE;
			
			// Resize canvas accordingly
			g_canvasH = (g_windowH < g_windowW * (CANVAS_H / CANVAS_W))? g_windowH : ((g_windowW * (CANVAS_H / CANVAS_W) + 0.5) >> 0);
			g_canvasW = (g_canvasH * (CANVAS_W / CANVAS_H) + 0.5) >> 0;
			g_canvasScale = g_canvasW / CANVAS_W;
			g_touchScale = 1 / g_canvasScale;
			
			
			g_canvas.style.width  = g_canvasW + "px";
			g_canvas.style.height = g_canvasH + "px";

			ComputeMouseOrigin();
		}
		
		// Resize once at start
		ResizeCanvas();
		window.onresize = ResizeCanvas;
		
		
	</script>
	<!-- LOCALIZATION -->
	<script src="Source/Localization_EN.js">                                  </script>
	
	<!--    ENGINE    -->
	<script src="Source/Engine/Graphic/SourceRect.js">                        </script>
	<script src="Source/Engine/Graphic/GraphicEngine.js">                     </script>
	
	<!--   UI OBJECT  -->
	<script src="Source/UIObject/Button.js">                                  </script>
	
	<!--     STATE    -->
	<script src="Source/State/GSSplash.js">                                   </script>
	<script src="Source/State/GSLoading.js">                                  </script>
	<script src="Source/State/GSMainMenu.js">                                 </script>
	<script src="Source/State/GSGameplay.js">                                 </script>
	
	<!-- ACTION PHASE -->
	<script src="Source/ActionPhase/Explosion.js">                                 </script>
	<script src="Source/ActionPhase/Bomb.js">                                 </script>
	<script src="Source/ActionPhase/Penguin.js">                              </script>
	<script src="Source/ActionPhase/Entity.js">                               </script>
	<script src="Source/ActionPhase/Map.js">                                  </script>
	<script src="Source/ActionPhase/Battle.js">                               </script>
	
	
	
	
	<script>
		var PLATFORM_DESKTOP = 0;
		var PLATFORM_MOBILE = 1;
		var PLATFORM_TIZEN = 2;
		var PLATFORM = PLATFORM_DESKTOP;   
		
		// Register the main loop here
		window.requestAnimFrame = (function () {
			return  window.requestAnimationFrame       || 
					window.webkitRequestAnimationFrame || 
					window.mozRequestAnimationFrame    || 
					window.oRequestAnimationFrame      || 
					window.msRequestAnimationFrame     || 
					function (callback) {
						window.setTimeout(callback, 16);
					};
			}
		)();
		
		var g_deltaTime = 0;
		var g_lastTime = new Date();
		var g_curTime  = new Date();

		var g_map = null;
		
		var MainLoop = function () {
			g_curTime = new Date();
			g_deltaTime = g_curTime - g_lastTime;
			
			UpdateState();
			
			g_lastTime = g_curTime;
			requestAnimFrame (MainLoop);
		}

		var groundMap = [
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
		];
		
		var entityMap = [
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		];
		
		var InitApp = function () {
			g_map = new Map();
			g_map.LoadMapFromArray (groundMap, true);

			MainLoop();
		}
		
		
		
		
		
		
		
		
		
		
		var g_keyState = new Array();
		for (var i=0; i<255; i++) {
			g_keyState[i] = 0;
		}
		
		
		
		
		var UpdateState = function () {
			g_map.Update();
			g_map.Draw();
		}
		
		
		
		function OnMouseDown (event) {
			
		}

		function OnMouseMove (event) {
		
		}

		function OnMouseUp (event) {
			
		}
		
		
		function OnKeyDown (event) {
			var keycode = event.which;
			g_keyState[keycode] = 1;
		}
		function OnKeyUp (event) {
			var keycode = event.which;
			g_keyState[keycode] = 0;
		}
		
		
		
		window.onkeydown  = OnKeyDown;
		window.onkeyup    = OnKeyUp;
		
		
		g_canvas.addEventListener('mousemove', OnMouseMove, false);
		g_canvas.addEventListener('mousedown', OnMouseDown, false);
		g_canvas.addEventListener('mouseup',   OnMouseUp, false);
		
		InitApp();
	</script>
</body>
